{include file="base/_meta" /}
    <style>
        #tbImgTable + .layui-table-view .layui-table-body tbody > tr > td {
            padding: 0;
        }

        #tbImgTable + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
            height: 48px;
            line-height: 48px;
        }

        .tb-img-circle {
            width: 40px;
            height: 40px;
            cursor: zoom-in;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }
    </style>
</head>
<body>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline layui-btn-group">&emsp;
                        <button class="layui-btn icon-btn" type="button" id="add">
                            <i class="layui-icon">&#xe654;</i>新增
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="tbImgTable" lay-filter="tbImgTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="TbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- js部分 -->
{include file="base/_script" /}
<script>
    layui.use(['layer', 'table','index'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var index = layui.index;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#tbImgTable',
            url: "{:url('shop/cate')}",
            page: true,
            cellMinWidth: 100,
            cols: [[
                {field: 'id', title: 'ID', align: 'center',width:90},
                {field: 'name', title: '分类名称', align: 'center'},
                {field: 'sort', title: '排序', align: 'center'},
                {
                    title: '图片', templet: function (d) {
                        var url = d.img;
                        return '<img src="' + url + '" class="tb-img-circle" tb-img alt=""/>';
                    }, align: 'center', width: 90, unresize: true
                },
                {field: 'create_time', title: '创建时间', align: 'center'},
                {title: '操作', toolbar: '#TbBar', align: 'center', minWidth: 200}
            ]]
        });

        /* 点击图片放大 */
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
        });

        /* 表格操作列点击事件 */
        /* 表格工具条点击事件 */
        table.on('tool(tbImgTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                index.openTab({
                    title: '编辑分类',
                    url: "{:url('shop/cate_form')}?id="+obj.data.id,
                    end: function() {
                        insTb.reload({where: '', page: {curr: 1}});
                    }
                });
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            }
        });

        $("#add").click(function () {
            index.openTab({
                title: '添加分类',
                url: "{:url('shop/cate_form')}",
                end: function() {
                    insTb.reload({where: '', page: {curr: 1}});
                }
            });
        })

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.get("{:url('shop/cate_del')}", {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
    });
</script>
</body>
</html>
